<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jmessage-sdk-web-2.1.0.min.js"></script>
		<script src="../jquery-1.11.0.min.js"></script>
		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<script src="http://7qn8xa.com1.z0.glb.clouddn.com/emoji.js"></script>
		<script type="text/javascript">
			window.JIM = new JMessage({
				debug: true,
			});
			//			var JIM = new JMessage();
			var appkey = "b6825e481f366aaa5535269f";
			var mykey = "87bcff52d9a0c71dd5476fcc";
			var random_str = "022cd9fd995849b58b3ef0e943421ed9";
			var timestamp = new Date().getTime();
			var target_id;
			var target_name;
			var target_tx;
			var formid;
			var formname;
			var formtx;

			function init() {
				JIM.init({
					"appkey": appkey,
					"random_str": random_str,
					"signature": "E422A978DE37196588531CD0C42010B5",
					"timestamp": timestamp
				}).onSuccess(function(data) {}).onFail(function(data) {});
			}
			init();

			function zc() {
				var myname = $("#myname").val();
				var psd = $("#psd").val();
				var nick_name = $("#nick_name").val();
				var birthday = $("#birthday").val();
				var signature = $("#signature").val();
				var gender = $("#gender").prop("checked") ? "1" : "2";
				var region = $("#region").val();

				JIM.register({
					'username': myname,
					'password': psd,
					'is_md5': false
				}).onSuccess(function(data) {
					JIM.login({
						'username': myname,
						'password': psd
					}).onSuccess(function(data) {
						//do somethins
						//登陆成功设置个人信息

						JIM.updateSelfInfo({
							'nick_name': nick_name,
							//							'birthday': birthday,
							'signature': signature,
							'gender': gender,
							'region': region,
							'address': region
						}).onSuccess(function(data) {
							// do something
							//登陆成功,设置头像
							JIM.updateSelfAvatar({ 'avatar': getFile() }).onSuccess(function(data) {
								//注册成功获取登陆信息
								formid = myname;
								JIM.getUserInfo({
									'username': formid
								}).onSuccess(function(data) {
									//do somethins
									formname = data.user_info.nickname;
									formtx = data.user_info.avatar;
								}).onFail(function(data) {
									// do something
								});
								alert("注册成功");
								$("#chat").show();
								$("#zc").hide();
							}).onFail(function(data) {
								alert("头像失败");
							});
						}).onFail(function(data) {
							// do something
							alert("个人信息失败");
						});
					})
				}).onFail(function(data) {
					// do something
					alert("注册失败");
				});
			}

			function tzzc() {
				$("#dl").hide();
				$("#zc").show();
			}
			//"http://media.file.jpush.cn/qiniu/image/j/8BCC803708A98157D346FE20E2EBAE02"
			function dl() {
				var dlid = $("#dlname").val();
				var dlpsd = $("#dlpsd").val();
				JIM.login({
					'username': dlid,
					'password': dlpsd
				}).onSuccess(function(data) {
					// do something
					$("#chat").show();
					$("#dl").hide();
					formid = dlid;
					JIM.getUserInfo({
						'username': formid
					}).onSuccess(function(data) {
						//do somethins
						formname = data.user_info.nickname;
						formtx = data.user_info.avatar;
					}).onFail(function(data) {
						// do something
					});
					JIM.onMsgReceive(function(data) {
						if(target_id == data.messages[0].content.from_id) {
							$("#show").append("<div style='float: left;' class='showdiv'><div class='left'><img src='http://media.file.jpush.cn/" + target_tx + "'/>" + data.messages[0].content.from_name + ":" + data.messages[0].content.msg_body.text + "</div></div>");
						}
					});
					JIM.onEventNotification(function(data) {
						if(data.event_type == 5) {
							var aa = confirm(data.from_username + "请求添加您为好友");
							if(aa) {
								returnaddfirends(data.from_username, "")
							} else {
								returnaddfirends(data.from_username, "已拒绝好友请求");
							}
						}
					});
					getfirendslist();
				}).onFail(function(data) {
					// do something
					alert("请正确输入用户名和密码");
				});
			}

			function dc() {
				JIM.loginOut();
				$("#chat").hide();
				$("#dl").show();
			}

			function send() {
				console.log(target_id);
				var sendtxt = $("#sendtxt").val();
				JIM.sendSingleMsg({
					'target_username': target_id,
					'target_nickname': target_name,
					'content': sendtxt,
					'appkey': false,
					'extras': false
				}).onSuccess(function(data, msg) {
					// do something
					console.log("1");
					$("#show").append("<div style='float: right;' class='showdiv'><div class='right'><img src='http://media.file.jpush.cn/" + formtx + "'/>" + formname + ":" + sendtxt + "</div></div>");
				}).onFail(function(data) {
					// do something
					console.log("2");
				});
			}

			function setimg(t) {
				if(t.files.length > 0) {
					if(t.files[0].type.indexOf("image") == -1) {
						console.log("只能读取图片");
						return;
					}
					if(window.FileReader) {
						var file = new FileReader();
						file.onloadend = function(data) {
							document.getElementById("mytx").src = data.target.result;
						}
						//重要！！！！！！！转化文件格式，可以再任何地方使用
						file.readAsDataURL(t.files[0]);
					} else {
						console.log("浏览器不支持");
					}
				}
			}

			function getFile() {
				var fd = new FormData();
				var file = document.getElementById('tx');
				if(!file.files[0]) {
					//					appendToDashboard('error:' + '获取文件失败');
					throw new Error('获取文件失败');
					alert("获取文件失败");
				}
				fd.append(file.files[0].name, file.files[0]);
				return fd;

			}
			var himtx;

			function getfirendslist() {
				JIM.getFriendList().onSuccess(function(listdata) {
					// do something
					$("#firendlist").html("");
					for(var a = 0; a < listdata.friend_list.length; a++) {
						var fidid = listdata.friend_list[a].username;
						var fidname = listdata.friend_list[a].nickname;
						JIM.getUserInfo({
							'username': fidid
						}).onSuccess(function(data) {
							//do somethins
							target_tx = data.user_info.avatar;
							$("#firendlist").append("<div class='firendlist_div'><img src='http://media.file.jpush.cn/" + target_tx + "'/><span>用户名:" + fidid + "</span><span>昵称:" + fidname + "</span></div>");
							console.log("1");
							$(".firendlist_div").each(function(i) {
								$(this).click(function() {
									target_id = listdata.friend_list[i].username;
									target_name = listdata.friend_list[i].nickname;
									JIM.getUserInfo({
										'username': target_id
									}).onSuccess(function(data) {
										//do somethins
										target_tx = data.user_info.avatar;
									}).onFail(function(data) {
										// do something
									});
								})
							});
						}).onFail(function(data) {
							// do something
						});
						console.log("2");
					}

				}).onFail(function(data) {
					// do something
				});
			}

			function addfirends() {
				var firendname = $("#firendname").val();
				var firendtxt = $("#firendtxt").val();
				JIM.addFriend({
					'target_name': firendname,
					'from_type': '1',
					'why': firendtxt
				}).onSuccess(function(data) {
					// do something
					alert("发送成功");
				}).onFail(function(data) {
					// do something
					alert("发送失败");
				});
			}

			function returnaddfirends(name, why) {
				JIM.addFriend({
					'target_name': name,
					'from_type': '2',
					'why': why
				}).onSuccess(function(data) {
					// do something
				}).onFail(function(data) {
					// do something
				});
			}
		</script>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				text-align: center;
			}
			
			#dl {
				width: 1280px;
				height: 720px;
				margin: 0px auto;
				background-image: url(img/bg.png);
				background-repeat: no-repeat;
			}
			
			#dl_head {
				font-family: "仿宋";
				font-size: 50px;
				font-weight: bold;
				position: relative;
				top: 20px;
			}
			
			#dl_p1 {
				position: relative;
				top: 150px;
				font-family: "仿宋";
				font-size: 25px;
			}
			
			#dl_p1>input {
				border: 1px solid #E4E3C5;
				border-radius: 5px;
				width: 200px;
				height: 30px;
				background-color: #F9F5EC;
				font-size: 25px;
			}
			
			#dl_p2 {
				position: relative;
				top: 180px;
				font-family: "仿宋";
				font-size: 25px;
			}
			
			#dl_p2>input {
				border: 1px solid #E4E3C5;
				border-radius: 5px;
				width: 200px;
				height: 30px;
				background-color: #F9F5EC;
				font-size: 25px;
			}
			
			#dl_p3 {
				position: relative;
				top: 220px;
			}
			
			#dl_p3>span {
				display: inline-block;
				width: 120px;
				height: 35px;
				background-image: url(img/登录con.png);
				background-repeat: no-repeat;
				cursor: pointer;
			}
			
			#dl_p3>a {
				margin-top: 10px;
				display: block;
				text-decoration: none;
				font-family: "仿宋";
				color: darkred;
				font-size: 20px;
				font-weight: bold;
			}
			
			#zc {
				display: none;
				width: 1280px;
				height: 720px;
				margin: 0px auto;
				background-image: url(img/bg.png);
				background-repeat: no-repeat;
			}
			
			#zc_head {
				font-family: "仿宋";
				font-size: 50px;
				font-weight: bold;
				position: relative;
				top: 20px;
			}
			
			#zc>#zc_p1 {
				margin-top: 100px;
			}
			
			#zc>p {
				font-family: "仿宋";
				font-size: 25px;
				margin-top: 20px;
			}
			
			#zc>p>[type=text] {
				border: 1px solid #E4E3C5;
				border-radius: 5px;
				width: 200px;
				height: 30px;
				background-color: #F9F5EC;
				font-size: 25px;
			}
			
			#zc>p>[type=file] {
				width: 110px;
			}
			
			#zc>p>[type=radio] {
				width: 75px;
			}
			
			#zccon {
				display: inline-block;
				width: 120px;
				height: 35px;
				background-image: url(img/注册con.png);
			}
			
			#chat {
				display: none;
				width: 1280px;
				height: 720px;
				margin: 0px auto;
				background-image: url(img/bg.png);
				background-repeat: no-repeat;
				position: relative;
			}
			
			#chat_head {
				font-family: "仿宋";
				font-size: 50px;
				font-weight: bold;
				position: relative;
				top: 20px;
			}
			
			#tcdl {
				position: absolute;
				top: 100px;
				left: 1150px;
				background-color: black;
				width: 100px;
				height: 35px;
				font-size: 20px;
				font-family: "仿宋";
				color: red;
				font-weight: bold;
				border: none;
				cursor: pointer;
			}
			
			#addfirends {
				font-family: "仿宋";
				font-size: 25px;
				position: absolute;
				top: 260px;
				left: 1000px;
			}
			
			#addfirends [type=text] {
				border: 1px solid #E4E3C5;
				border-radius: 5px;
				width: 200px;
				height: 30px;
				background-color: #F9F5EC;
				font-size: 25px;
			}
			
			#addfirends [type=button] {
				margin-top: 20px;
				background-color: black;
				width: 100px;
				height: 30px;
				font-size: 20px;
				font-family: "仿宋";
				color: red;
				font-weight: bold;
				border: none;
				cursor: pointer;
			}
			
			#sx {
				cursor: pointer;
				position: absolute;
				top: 120px;
				left: 80px;
				background-color: black;
				width: 130px;
				height: 30px;
				font-size: 20px;
				font-family: "仿宋";
				color: red;
				font-weight: bold;
				border: none;
			}
			
			#firendlist {
				width: 260px;
				height: 380px;
				position: absolute;
				top: 170px;
				left: 20px;
				background-color: floralwhite;
			}
			
			#show {
				font-size: 20px;
				font-family: "仿宋";
				font-weight: bold;
				display: inline-block;
				width: 700px;
				height: 500px;
				border: 1px solid;
				background-color: lightyellow;
				overflow: auto;
				margin-top: 50px;
			}
			
			#sendtxt {
				width: 700px;
				height: 60px;
			}
			
			#fscon {
				display: inline-block;
				width: 120px;
				height: 35px;
				background-image: url(img/发送con.png);
			}
			
			.showdiv {
				width: 500px;
				height: 50px;
			}
			
			.left>img {
				width: 50px;
				height: 50px;
				float: right;
				margin-right: -50px;
			}
			.right>img {
				width: 50px;
				height: 50px;
				margin-left: -50px;
			}
			
			.left {
				float: left;
				height: 50px;
				line-height: 50px;
				border-radius: 3px;
				background-color: gray;
			}
			
			.right {
				float: right;
				height: 50px;
				line-height: 50px;
				border-radius: 3px;
				background-color: greenyellow
			}
			
			.firendlist_div {
				cursor: pointer;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid;
				font-size: 13px;
			}
			
			.firendlist_div>img {
				margin-top: 5px;
				width: 30px;
				height: 30px;
			}
			
			.firendlist_div:hover {
				background-color: lightgoldenrodyellow;
			}
			
			.firendlist_div>span {
				margin-left: 6px;
			}
			
			#mytx {
				width: 100px;
				height: 100px;
				position: relative;
				left: 20px;
				top: 5px;
			}
		</style>

	</head>

	<body>
		<div id="dl">
			<div id="dl_head">谈古论今</div>
			<p id="dl_p1">用户名：<input type="text" id="dlname" /></p>
			<p id="dl_p2">密&nbsp;码： <input type="text" id="dlpsd" /></p>
			<p id="dl_p3"><span onclick="dl()"></span>
				<a href="#" onclick="tzzc()">立即注册</a>
			</p>
		</div>
		<div id="zc">
			<div id="zc_head">注册</div>
			<p id="zc_p1">用户名：<input type="text" id="myname" /></p>
			<p id="zc_p2">密&nbsp;码： <input type="text" id="psd" /></p>
			<p id="zc_p3" style="vertical-align: middle;">头&nbsp;像：<input type="file" id="tx" onchange="setimg(this)" /><img id="mytx" /></p>
			<p id="zc_p4">昵&nbsp;称： <input type="text" id="nick_name" /></p>
			<p id="zc_p5">生&nbsp;日： <input type="text" id="birthday" /></p>
			<p id="zc_p6">签&nbsp;名： <input type="text" id="signature" /></p>
			<p id="zc_p7">性&nbsp;别： 男<input id="gender" type="radio" name="sex" checked="checked" />女<input type="radio" name="sex" /></p>
			<p id="zc_p8">地&nbsp;区： <input type="text" id="region" /></p>
			<p id="zc_p9"><span id="zccon" onclick="zc()"></span></p>
		</div>
		<div id="chat">
			<div id="chat_head">谈古论今</div>
			<input id="tcdl" type="button" value="退出登录" onclick="dc()" />
			<div id="addfirends">
				<p>查找帐号：<input type="text" id="firendname" /></p>
				<p>备注信息： <input type="text" id="firendtxt" /></p>
				<p><input type="button" value="添加好友" onclick="addfirends()" /></p>
			</div>
			<input id="sx" type="button" value="刷新好友列表" onclick="getfirendslist()" />
			<div id="firendlist">

			</div>
			<div id="show">

			</div><br />
			<textarea id="sendtxt" cols="20" rows="5"></textarea><br />
			<div id="fscon" onclick="send()"></div>
		</div>
	</body>

</html>